<template>
  <el-card class="box-card order-count" shadow="never">
    <!-- <div slot="header" class="clearfix">
      <span style="font-size:18px">今日数据</span>
    </div> -->
    <el-row :gutter="0" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
        <div class="card-panel" @click="toOrderList('second', 1)">
          <div class="card-panel-description">
            <div class="card-panel-text">待发货</div>
            <count-to
              :start-val="0"
              :end-val="numberFilter(orderInfo.deliverdNum)"
              :duration="1000"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
        <div
          class="card-panel"
          @click="toOrderList('sixth', 4, 'USER_CANCEL_TOTAL')"
        >
          <div class="card-panel-description">
            <div class="card-panel-text">买家取消订单</div>
            <count-to
              :start-val="0"
              :end-val="numberFilter(orderInfo.buyerCancelOrderNum)"
              :duration="1000"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
        <div
          class="card-panel"
          @click="toOrderList('sixth', 4, 'IDENTIFICATION_FAILED')"
        >
          <div class="card-panel-description">
            <div class="card-panel-text">鉴定未通过</div>
            <count-to
              :start-val="0"
              :end-val="numberFilter(orderInfo.identifyFailNum)"
              :duration="1000"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
        <div
          class="card-panel"
          @click="toOrderList('sixth', 4, 'USER_RETURN_GOODS')"
        >
          <div class="card-panel-description">
            <div class="card-panel-text">买家退货</div>
            <count-to
              :start-val="0"
              :end-val="numberFilter(orderInfo.buyerReturnNum)"
              :duration="1000"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import CountTo from 'vue-count-to'
export default {
  components: {
    CountTo
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      statistics: {
        amountBalance: 0,
        returnOrAfterSale: 0,
        shipped: 0,
        waitPay: 0,
        waitShip: 100,
        warnRemind: 0
      }
    }
  },
  mounted() {},
  methods: {
    numberFilter(v) {
      if (!v) {
        return 0
      } else {
        return Number(v)
      }
    },
    toOrderList(v, n, o) {
      this.$router.push({
        path: '/order/list',
        query: {
          tabName: v,
          orderStatus: n,
          cancel: o
        }
      })
    },
    priceFilter(price, digit = 2) {
      let ret
      if (!price) {
        ret = 0
      } else {
        ret = price / 100
      }
      return ret.toFixed(digit)
    }
  }
}
</script>
<style lang="scss">
.order-count {
  height: 246px;
  &.el-card {
    border: 0 none;
  }
  .el-card__header {
    position: relative;
  }
  .el-card__body {
    padding: 0;
  }
  .data-time {
    .el-radio-button--medium .el-radio-button__inner {
      padding: 8px 30px;
    }
  }
}
</style>
<style lang="scss" scoped>
.order-count {
  margin-bottom: 20px;
}
.panel-group {
  display: flex;
  align-items: center;
  height: 136px;
  background-color: #fff;
  .card-panel-col {
    padding-top: 70px;
    height: 100%;
    width: 25% !important;
    // .card-panel {
    //   cursor: pointer;
    // }
    // &:hover {
    //   // background-color: #efefef;
    //   .card-panel-num {
    //     color: #ed145b;
    //   }
    // }
  }
  .card-panel {
    height: 100%;
    font-size: 12px;
    text-align: center;
    color: #333;
    .card-panel-description {
      .card-panel-text {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 20px;
      }
      .card-panel-num {
        font-size: 40px;
        line-height: 30px;
        font-family: XLFQ-Regular, XLFQ;
        font-weight: 400;
      }
      .danger {
        color: #f56c6c;
      }
      & {
        cursor: pointer;
      }
      // &:hover {
      //   .card-panel-num {
      //     color: #DF232F;
      //   }
      // }
    }
  }
}
</style>
